<template lang="pug">
.select-department-wrap
	.department-left
		scroll-view.scroll-view(scroll-y)
			.item(:class="{'active':actIndex===index}" @click="changeList(item.department_id,index)" v-for="(item,index) in departmentList" :key="index") {{item.department_name}}
	.department-right
		scroll-view.scroll-view(scroll-y :scroll-top="scrollTop")
			.item(@click="goDoctorList(departmentId,departmentName)") 全部
			.item(@click="goDoctorList(item.department_id,item.department_name)" v-for="(item,index) in departmentDetail" :key="index") {{item.department_name}}

</template>

<script>
export default {
	name: 'selectDepartment',
	data() {
		return {
			departmentList: [],
			departmentId: '',
			departmentName: '',
			departmentDetail: [],
			scrollTop: 0,
			actIndex: 0,
			totalCount: 0
		}
	},
	created() {},
	onLoad() {
		Object.assign(this.$data, this.$options.data())
	},
	mounted() {
		this.wx.setNavigationBarTitle({
			title: this.btoa(this.$route.query.hospitalName)
		})
		this.getdepartmentList()
	},
	methods: {
		getdepartmentList() {
			this.api.jtApi
				.departmentList({
					hospital_id: this.$route.query.hospitalId.toString(),
					show_type: '2',
					page_index: '1',
					page_size: '999'
				})
				.then(data => {
					if (data.ret_code === '0') {
						let department = data.departments.department
						this.departmentList = this.tools.formatToArray(department)
						this.departmentDetail = this.tools
							.formatToArray(department[this.actIndex].children)
							.filter(item => item.department_name !== null)
						this.departmentId = this.departmentList[0].department_id
						this.departmentName = this.departmentList[0].department_name
					}
				})
				.catch(err => {})
		},
		changeList(id, index) {
			if (index !== this.actIndex) {
				this.departmentDetail = this.tools
					.formatToArray(this.departmentList[index].children)
					.filter(item => item.department_name !== null)
				this.departmentId = id
				this.departmentName = this.departmentList[index].department_name
				this.actIndex = index
				this.scrollTop = 0
			}
		},
		goDoctorList(id, name) {
			this.$router.push({
				path: '/views/bespeak/doctorList',
				query: {
					departmentId: id,
					hospitalId: this.$route.query.hospitalId,
					title: this.atob(name)
				}
			})
		}
	}
}
</script>

<style lang="stylus">
	.select-department-wrap
		display flex
		position fixed
		cover()
		.scroll-view
			height 100%
		.item
			line-height 96px
			overflow hidden
			white-space nowrap
			text-overflow ellipsis
			color blackFontColor4C
			font-size 28px
			&.active
				color themeColor
				background-color white
		.department-left
			width 230px
			background-color backgroundColor
			.item
				padding 0 mainPadding
		.department-right
			flex 1
			background-color white
			.item
				padding 0 70px

</style>
